<template>
  <div>
    <BasicForm @register="registerForm">
      <template #phone="{ model, field }">
        <span>{{ model[field] }}</span>
      </template>

      <template #verifyCode="{ model, field }">
        <a-row :gutter="8">
          <a-col :sm="14" :md="14" :lg="14" :xl="14">
            <a-input v-model:value="model[field]" class="input-verify-code" placeholder="请输入验证码" />
          </a-col>
          <a-col :sm="8" :md="8" :lg="8" :xl="8">
            <a-button type="primary" style="width: 100%" @click="handleSend" :disabled="disabled">{{ butName }}</a-button>
          </a-col>
        </a-row>
      </template>
    </BasicForm>
    <ManMachineVerifyModal @register="registerManMachineVerifyModal" @submit="handleManMachineVerifySuccess"/>
  </div>
</template>
<script lang="ts">
import { ref, onMounted, defineComponent, watch, nextTick, PropType } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { phoneFormSchema } from './verify.data';
import { useUserStore } from '/@/store/modules/user';
import { TaskCode, BizType } from '/@/api/sys/model/msgPushModel';
import { useSendCaptchaMsg } from './useSendCaptchaMsg'
import ManMachineVerifyModal from './ManMachineVerifyModal.vue';
// 声明Emits
export default defineComponent({
  name: 'SmsVerify',
  props: {
    bizType: {require: true, type: String},
    verifyType: {require: true, type: String},
    toUser: {require: false, type: String},
    // 接口参数
    apiParams: {require: false, type: Object},
    // 发送验证码接口
    api: {require: false, type: Function},
  },
  components: {
    BasicForm, ManMachineVerifyModal
  },
  emits: ['register'],
  setup(props, { emit }) {
    const userStore = useUserStore();
    //表单配置
    const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
      schemas: phoneFormSchema,
      labelWidth: '90px',
      showActionButtonGroup: false
    });

    onMounted(async () => {
      await resetFields()
      await setFieldsValue({ phone: props.toUser || userStore.getUserInfo.phone})
    })

    watch(
      () => props.toUser,
      () => {
        nextTick(async () => {
          await setFieldsValue({phone: props.toUser || userStore.getUserInfo.phone})
        });
      },
      {
        immediate: true,
      }
    );

    const { 
      handleSend, butName, disabled, verifyInfo, registerManMachineVerifyModal, handleManMachineVerifySuccess
    } = useSendCaptchaMsg({ 
      taskCode: TaskCode.VERIFY_SMS, bizType: props.bizType, 
      apiParams: ref(props.apiParams),
      api: props.api
    })

    const getData = async () => {
      const values = await validate()
      return {
        ...values, ...verifyInfo
      }
    }
    
    return {
      handleSend, registerForm, 
      registerManMachineVerifyModal,
      handleManMachineVerifySuccess,
      butName, disabled, getData, ...props
    }
  }
})


</script>

<style>


</style>